<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['供应链管理','生产采购管理','委外加工订单']" icon="fa fa-cogs"
			class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	<sa-widgets-grid>
		<div class="s_table">
			<div sa-widget [editbutton]="false" color="darken" class="clearfix">
				<header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2>委外加工订单</h2>
				</header>
				<div>
					<div class="widget-body no-padding">
						<div class="page-header clearfix s_table_opreation">
							<div class="left page-header-btn" style="width: calc(100% - 220px);">

								<div class="top_module cancle">
									<span class="module_text">委外编号</span>
									<input type="text"
										class="module_inp top_module_select ng-pristine ng-valid ng-touched"
										placeholder="委外编号" [(ngModel)]='tableSearch.consignorNumber'>
									<div class="s_del_icon" (click)='delKey("consignorNumber")'>x</div>
								</div>

								<div class="top_module cancle">
									<span class="module_text">供应商</span>
									<input type="text"
										class="module_inp top_module_select ng-pristine ng-valid ng-touched"
										placeholder="供应商" [(ngModel)]='tableSearch.supplierName'>
									<div class="s_del_icon" (click)='delKey("supplierName")'>x</div>
								</div>
								<div class="top_module cancle">
									<span class="module_text">物料编码</span>
									<input type="text"
										class="module_inp top_module_select ng-pristine ng-valid ng-touched"
										placeholder="物料编码" [(ngModel)]='tableSearch.materialNumber'>
									<div class="s_del_icon" (click)='delKey("materialNumber")'>x</div>
								</div>
								<div class="top_module cancle">
									<span class="module_text">物料名称</span>
									<input type="text"
										class="module_inp top_module_select ng-pristine ng-valid ng-touched"
										placeholder="物料名称" [(ngModel)]='tableSearch.materialName'>
									<div class="s_del_icon" (click)='delKey("materialName")'>x</div>
								</div>
								<div class="selectDate top_module">
									<table-select-date [notInit]='true' [minDay]='true' [specifyId]='specifyId'
										(outerTime)="getSelectTableTime($event)" [specifyTime]='specifyTime' startTimePlaceholder="选择交货开始日期" endTimePlaceholder="选择交货结束日期">
									</table-select-date>
								</div>
								<button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
								<button type="button" class="btn btn-primary" (click)="showImportModal(weightModal)"
									*ngIf="uploadPermission">上传</button>
							</div>
						</div>
						<div class="table_scroll">
							<table
								class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
								<thead>
									<tr>
										<th>委外编号</th>
										<th>供应商</th>
										<th>日期</th>
										<th>物料编码</th>
										<th>物料名称</th>
										<th>规格型号</th>
										<th>单位</th>
										<th>数量</th>
										<th>交货日期</th>
										<th>创建时间</th>
										<th>创建人</th>
										<th>更新时间</th>
										<th>更新人</th>
										<!-- 这里也根据权限 -->
										<th *ngIf="delPermission">操作</th>
									</tr>
								</thead>
								<tbody>
									<tr *ngFor="let row of tableData; let i = index" [attr.data-index]="i">
										<td>{{row.consignorNumber}}</td>
										<td>{{row.supplierName}}</td>
										<td>{{row.date}}</td>
										<td>{{row.materialNumber}}</td>
										<td>{{row.materialName}}</td>
										<td>{{row.specification}}</td>
										<td>{{row.units}}</td>
										<td>{{row.count}}</td>
										<td>{{row.deliveryDate}}</td>
										<td>{{row.createTime}}</td>
										<td>{{row.createName}}</td>
										<td>{{row.updateTime}}</td>
										<td>{{row.updateName}}</td>
										<!-- 这里也根据权限 -->
										<td>
											<button type="button" (click)="delPurchase(row)"
												*ngIf="delPermission">删除</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="table-fix clearfix">
							<paginator [totalRecords]="totalCounts" [rows]="pageSize" [currentPage]="curPage - 1"
								(onPageChange)="paginate($event)">
							</paginator>
							<button type="button" class="btn default refresh_btn" (click)="refresh()"><i
									class="fa fa-refresh"></i></button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</sa-widgets-grid>
</div>

<!-- 导入弹框 -->
<div bsModal #weightModal="bs-modal" class="modal fade" id="weightModal" tabindex="-1" role="dialog"
	aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header" style="position: relative;">
				<button type="button" class="close" (click)="cancelUp(weightModal)" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">上传Excel文件</h4>
			</div>
			<div class="modal-body">

				<div class="row">
					<form class="form form-inline " role="form">
						<div class="row">
							<div class="col-sm-10" style="padding: 0;">
								<div class="clearfix module_line">
									<button type="button" class="btn btn-primary"
										style="width: 120px;margin-bottom: 12px;">上传模板文件
										<input type="file" class="up" (change)="fileChange($event.target.files)"
											name="fileToUpload" (click)='clearFile()' [(ngModel)]='fileUp' type="file"
											placeholder='' />
									</button>
									<span class="row" class="note">注：格式excel</span>
								</div>
							</div>
						</div>
						<div *ngIf="fileToUpload">
							<label class="control-label col-sm-1"></label>
							<div>
								<ul>
									<li class="file_list"><i class="fa fa-file-text-o"
											style="margin-right: 12px;"></i>{{fileToUpload.name}}<i
											class="fa fa-check-circle green" style="margin-left: 60px;"></i></li>
								</ul>
							</div>
						</div>
					</form>
				</div>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" (click)="cancelUp(weightModal)">取消</button>
				<button type="button" class="btn btn-primary"
					(click)="submitData(weightModal,submitCheckModal)">确认</button>
			</div>
		</div>
	</div>
</div>
<!-- 导入弹框 结束 -->

<!-- 提交核对 -->
<div bsModal #submitCheckModal="bs-modal" id="submitCheckModal" class="modal fade" tabindex="-1" role="dialog"
	aria-labelledby="myLargeModalLabel" aria-hidden="true" style="overflow: auto;">
	<div class="modal-dialog modal-lg" style="width: 1200px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" (click)="cancelSubmitCheck(submitCheckModal,weightModal)"
					aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">提交核对</h4>
			</div>
			<div class="modal-body" style="padding: 15px;">
				<div class="page-header clearfix s_table_opreation"
					style="margin-top: 0px;margin-bottom: 15px;padding-bottom: 15px;">
					<div class="left page-header-btn">
						<div class="top_module">
							<span class="module_text">提交前状态</span>
							<select name="result" id="" class="module_inp" [(ngModel)]="result">
								<option value="">全部</option>
								<option value="1">成功</option>
								<option value="2">失败</option>
							</select>
						</div>
						<button type="button" class="btn btn-primary" (click)="queryCheckTable()">查询</button>
					</div>
					<div class="right top-search" style="text-align: right;">
						<button type="button" class="btn btn-primary" (click)="batchDelete()">批量删除</button>
					</div>
				</div>
				<div class="table_scroll" style="max-height:400px;min-height:200px;overflow-y: auto;">
					<table
						class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
						<thead>
							<tr>
								<th>
									<div class="checkbox" style="margin:0;left: 5px;text-align: center;">
										<label>
											<input type="checkbox" class="checkbox style-0" [(ngModel)]="allChecked"
												(click)="allSelected()">
											<span></span>
										</label>
									</div>
								</th>
								<th>提交前状态</th>
								<th>委外编号</th>
								<th>供应商</th>
								<th>日期</th>
								<th>物料编码</th>
								<th>物料名称</th>
								<th>规格型号</th>
								<th>单位</th>
								<th>数量</th>
								<th>交货日期</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody *ngIf="submitCheckTableData.length != 0">
							<tr *ngFor="let row of submitCheckTableData; let i = index" [attr.data-index]="i"
								(click)='rowSelected(row,$event,i)'>
								<td>
									<div class="checkbox" style="margin:0;left: 5px;text-align: center;">
										<label class="checkbox-label">
											<input type="checkbox" class="checkbox style-0" [(ngModel)]="row.isChecked"
												(click)='rowSelected(row,$event,i)'>
											<span class="checkbox-flag"></span>
										</label>
									</div>
								</td>
								<td>
									<span *ngIf="row.result == 1" style="color: green;">成功</span>
									<span *ngIf="row.result == 2" style="color: red;">失败</span>
								</td>
								<td>{{row.consignorNumber}}</td>
								<td>{{row.supplierName}}</td>
								<td>{{row.date}}</td>
								<td>{{row.materialNumber}}</td>
								<td>{{row.materialName}}</td>
								<td>{{row.specification}}</td>
								<td>{{row.units}}</td>
								<td>{{row.count}}</td>
								<td>{{row.deliveryDate}}</td>
								<td>
									<button type="button"
										(click)="editSubmitCheck(row,editSubmitCheckModal)">查看</button>
									<button type="button" (click)="delSubmitCheck(row)">删除</button>
								</td>
							</tr>
						</tbody>
						<tbody *ngIf="submitCheckTableData.length == 0"
							style="height: 50px;margin: 0 auto;text-align: center;line-height: 50px;">暂无查询数据</tbody>
					</table>
				</div>
				<div class="table-fix clearfix">
					<paginator [totalRecords]="checkTotalCounts" [rows]="checkPageSize" [currentPage]="checkCurPage - 1"
						(onPageChange)="checkPaginate($event)"></paginator>
					<button type="button" class="btn default refresh_btn" (click)="checkRefresh()">
						<i class="fa fa-refresh"></i>
					</button>
				</div>
				<div class="uploadResult">
					{{numMessage}}
					<!-- 总数量:{{ allSize }}/成功:<span class="green">{{ success }}</span>/失败:<span class="red">{{ errSize }}</span> -->
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"
					(click)="cancelSubmitCheck(submitCheckModal,weightModal)">取消</button>
				<button type="button" class="btn btn-primary" (click)="submitCheck(submitCheckModal)">提交</button>
			</div>
		</div>
	</div>
</div>
<!-- 提交核对 end-->

<!-- 编辑提交核对 -->
<section bsModal #editSubmitCheckModal="bs-modal" class="modal fade addRenewal" tabindex="-1" role="dialog"
	aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" (click)="closeEditSubmitCheck(editSubmitCheckModal)"
					aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">查看</h4>
			</div>
			<div class="modal-body">
				<div class="row form-horizontal">
					<div class="form-group">
						<label class="control-label col-sm-2 no-padding-right">委外编号</label>
						<div class="col-sm-9">
							<div class="clearfix">
								<input class="form-control" name="consignorNumber" autocomplete="off"
									[(ngModel)]='editcheckForm.consignorNumber' type="text" placeholder="委外编号"
									disabled />
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2 no-padding-right">供应商</label>
						<div class="col-sm-9">
							<div class="clearfix">
								<input class="form-control" name="supplierName" autocomplete="off"
									[(ngModel)]='editcheckForm.supplierName' type="text" placeholder="供应商" disabled />
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2 no-padding-right">日期</label>
						<div class="col-sm-9">
							<div class="clearfix">
								<input class="form-control" name="date" autocomplete="off"
									[(ngModel)]='editcheckForm.date' type="text" placeholder="日期" disabled />
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2 no-padding-right">物料编码</label>
						<div class="col-sm-9">
							<div class="clearfix">
								<input class="form-control" name="materialNumber" autocomplete="off"
									[(ngModel)]='editcheckForm.materialNumber' type="text" placeholder="物料编码"
									disabled />
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2 no-padding-right">物料名称</label>
						<div class="col-sm-9">
							<div class="clearfix">
								<input class="form-control" name="materialName" autocomplete="off"
									[(ngModel)]='editcheckForm.materialName' type="text" placeholder="物料名称" disabled />
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2 no-padding-right">规格型号</label>
						<div class="col-sm-9">
							<div class="clearfix">
								<input class="form-control" name="specification" autocomplete="off"
									[(ngModel)]='editcheckForm.specification' type="text" placeholder="规格型号" disabled />
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2 no-padding-right">单位</label>
						<div class="col-sm-9">
							<div class="clearfix">
								<input class="form-control" name="units" autocomplete="off"
									[(ngModel)]='editcheckForm.units' type="text" placeholder="单位" disabled />
							</div>
						</div>
					</div>
					<div class="form-group s_fix_select2">
						<label class="control-label col-sm-2 no-padding-right">数量</label>
						<div class="col-xs-9">
							<input class="form-control" name="count" autocomplete="off"
								[(ngModel)]='editcheckForm.count' placeholder="数量" type="text" disabled />
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2 no-padding-right">交货日期</label>
						<div class="col-sm-9">
							<div class="clearfix">
								<input class="form-control" name="deliveryDate" autocomplete="off"
									[(ngModel)]='editcheckForm.deliveryDate' placeholder="交货日期" type="text" disabled />
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2 no-padding-right">失败原因</label>
						<div class="col-sm-9">
							<div class="clearfix">
								<textarea class="form-control" name="errMsg" autocomplete="off"
									[(ngModel)]='editcheckForm.errMsg' type="text" disabled></textarea>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- 编辑提交核对 end-->

<style>
	.uploadResult {
		margin-top: 10px;
	}
</style>